<template>
<div class="distributor-merchandise-setting views-container">
    <div class="wlm-form">
        <div class="wlm-form-header">佣金设置</div>
        <div class="wlm-form-content">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="140px" class="retail-form" label-position="right">
                <el-form-item label="是否参与分销">
                    <el-radio-group v-model="formFormatData.formData.is_distribution">
                        <el-radio :label="1">参与</el-radio>
                        <el-radio :label="0">不参与</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否开启单独分销" v-show="formFormatData.formData.is_distribution!==0">
                    <el-radio-group v-model="formFormatData.formData.is_ind_dealer">
                        <el-radio :label="0">默认规则</el-radio>
                        <el-radio :label="1">单独设置</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="分销佣金类型" v-show="formFormatData.formData.is_distribution!==0&&formFormatData.formData.is_ind_dealer==1">
                    <el-radio-group v-model="formFormatData.formData.dealer_money_type">
                        <el-radio :label="10">百分比</el-radio>
                        <el-radio :label="20">固定金额</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="" v-show="formFormatData.formData.is_distribution==1">
                    <el-table v-show="formFormatData.formData.is_ind_dealer==1" :data="formFormatData.formData.leave_sku" style="width: 100%">
                        <el-table-column label="商品规格">
                            <template slot-scope="scope">
                                <p class="leave-item" v-for="(item) in formFormatData.formData.spec_type==10?[scope.row.sku[0]]:scope.row.sku" :key="item.sku_leave_id">{{formFormatData.formData.spec_type==10?'单规格':item.title || '-'}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="价格">
                            <template slot-scope="scope">
                                <p class="orders-red leave-item" v-for="(item) in formFormatData.formData.spec_type==10?[scope.row.sku[0]]:scope.row.sku" :key="item.sku_leave_id">￥{{item.goods_price || '-'}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="会员价" v-if="formFormatData.formData.is_member_price==1">
                            <template slot-scope="scope">
                                <p class="orders-red leave-item" v-for="(item) in formFormatData.formData.spec_type==10?[scope.row.sku[0]]:scope.row.sku" :key="item.sku_leave_id">￥{{item.member_price || '-'}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="分销商等级名称">
                            <template slot-scope="scope">
                                <span>{{scope.row.leave_title}}</span>
                                <el-tag style="margin-left:10px;" v-show="scope.$index==0">默认等级</el-tag>
                            </template>
                        </el-table-column>
                        <section v-if="formFormatData.formData.spec_type">
                            <el-table-column label="普通用户一级佣金">
                                <template slot-scope="scope">
                                    <div class="flex-col" v-if="scope.row.sku">
                                        <div class="leave-item" v-for="(item) in formFormatData.formData.spec_type==10?[scope.row.sku[0]]:scope.row.sku" :key="item.sku_leave_id">
                                            <!-- <el-input type="number" :controls="true" size="small" :min="0" :max="100"
                                             @blur="notZero(item.first_money,'scale')" @input.native="clearNativeReg(item.first_money,'scale',-1,100,0.01)"
                                              v-if="formFormatData.formData.dealer_money_type==10" v-model.number="item.first_money.scale">
                                                <template slot="append">%</template>
                                            </el-input> -->
                                            <!-- <el-input type="text" :controls="false" size="small" :min="0" :max="100"
                                            @blur="notZero(item.first_money,'money')" @input.native="clearNativeReg(item.first_money,'money',-1,-1,0.01)"
                                            v-if="formFormatData.formData.dealer_money_type==20" v-model="item.first_money.money" style="width:120px;margin-right:6px;">
                                                <template slot="append">元</template>
                                            </el-input> -->
                                             <div class="input-flex input-slot flex-row flex-align-c flex-justify-s gc-append-box" v-if="formFormatData.formData.dealer_money_type==10">
                                                <el-input-number
style="width:80px;"
:controls="false"
size="small"
:min="0"
                                                @blur="notZero(item.first_money,'scale')"
@input.native="clearNativeReg(item.first_money,'scale',-1,100,0.01)"
                                                v-if="formFormatData.formData.dealer_money_type==10"
v-model="item.first_money.scale">
                                                </el-input-number>
                                                    <div class="gc-appendt group__append">%</div>
                                             </div>
                                            <div class="input-flex input-slot flex-row flex-align-c flex-justify-s gc-append-box" v-if="formFormatData.formData.dealer_money_type==20">
                                                <el-input-number
style="width:80px;"
:controls="false"
size="small"
:min="0"
                                                  @blur="notZero(item.first_money,'money')"
@input.native="clearNativeReg(item.first_money,'money',-1,-1,0.01)"
                                                  v-if="formFormatData.formData.dealer_money_type==20"
v-model="item.first_money.money"></el-input-number>
                                                <div class="gc-appendt group__append">元</div>
                                            </div>
                                             <!-- <el-input-number :controls="false" size="small" :min="0" :max="100"  @blur="notZero(item.first_money,'scale')" @input.native="clearNativeReg(item.first_money,'scale',-1,100,0.01)" v-if="formFormatData.formData.dealer_money_type==10" v-model.number="item.first_money.scale" style="width:120px;margin-right:6px;">
                                                <div class="gc-append gc-append-right">%</div>
                                             </el-input-number> -->
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="会员用户一级佣金" v-if="formFormatData.formData.dealer_money_type==20&&formFormatData.formData.is_member_price==1">
                                <template slot-scope="scope">
                                    <div class="flex-col" v-if="scope.row.sku">
                                        <div class="leave-item" v-for="(item) in formFormatData.formData.spec_type==10?[scope.row.sku[0]]:scope.row.sku" :key="item.sku_leave_id">
                                            <!-- <el-input type="number"  @input.native="clearNativeReg(item.first_money,'member_money',-1,-1,0.01)" v-model.number="item.first_money.member_money" style="width:120px;margin-right:6px;">
                                                <template slot="append">元</template>
                                            </el-input> -->
                                             <div class="input-flex input-slot flex-row flex-align-c flex-justify-s gc-append-box">
                                                 <el-input-number
style="width:80px;"
:controls="false"
size="small"
:min="0"
                                                   @input.native="clearNativeReg(item.first_money,'member_money',-1,-1,0.01)"
v-model="item.first_money.member_money">
                                                 </el-input-number>
                                                 <div class="gc-appendt group__append">元</div>
                                             </div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="普通用户二级佣金" v-if="commission_level==2||commission_level==3">
                                <template slot-scope="scope">
                                    <div class="flex-col" v-if="scope.row.sku">
                                        <div class="leave-item" v-for="(item) in formFormatData.formData.spec_type==10?[scope.row.sku[0]]:scope.row.sku" :key="item.sku_leave_id">
                                            <!-- <el-input type="number" @blur="notZero(item.second_money,'scale')"
                                            @input.native="clearNativeReg(item.second_money,'scale',-1,100,0.01)"
                                             v-if="formFormatData.formData.dealer_money_type==10" v-model.number="item.second_money.scale"
                                              style="width:120px;margin-right:6px;">
                                                <template slot="append">%</template>
                                            </el-input>
                                            <el-input type="number" @blur="notZero(item.second_money,'money')" @input.native="clearNativeReg(item.second_money,'money',-1,-1,0.01)"
                                             v-if="formFormatData.formData.dealer_money_type==20" v-model.number="item.second_money.money" style="width:120px;margin-right:6px;">
                                                <template slot="append">元</template>
                                            </el-input> -->
                                            <div class="input-flex input-slot flex-row flex-align-c flex-justify-s gc-append-box" v-if="formFormatData.formData.dealer_money_type==10">
                                                <el-input-number
style="width:80px;"
:controls="false"
size="small"
:min="0"
                                                    @blur="notZero(item.second_money,'scale')"
                                                    @input.native="clearNativeReg(item.second_money,'scale',-1,100,0.01)"
                                                v-if="formFormatData.formData.dealer_money_type==10"
v-model="item.second_money.scale">
                                                </el-input-number>
                                                    <div class="gc-appendt group__append">%</div>
                                             </div>
                                            <div class="input-flex input-slot flex-row flex-align-c flex-justify-s gc-append-box" v-if="formFormatData.formData.dealer_money_type==20">
                                                <el-input-number
style="width:80px;"
:controls="false"
size="small"
:min="0"
                                                  @blur="notZero(item.second_money,'money')"
@input.native="clearNativeReg(item.second_money,'money',-1,-1,0.01)"
                                                   v-if="formFormatData.formData.dealer_money_type==20"
v-model="item.second_money.money">
                                                   </el-input-number>
                                                <div class="gc-appendt group__append">元</div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="会员用户二级佣金" v-if="formFormatData.formData.dealer_money_type==20&&formFormatData.formData.is_member_price==1&&(commission_level==2||commission_level==3)">
                                <template slot-scope="scope">
                                    <div class="flex-col" v-if="scope.row.sku">
                                        <div class="leave-item" v-for="(item) in formFormatData.formData.spec_type==10?[scope.row.sku[0]]:scope.row.sku" :key="item.sku_leave_id">
                                            <!-- <el-input type="number" @input.native="clearNativeReg(item.second_money,'member_money',-1,-1,0.01)"
                                            v-model.number="item.second_money.member_money" style="width:120px;margin-right:6px;">
                                                <template slot="append">元</template>
                                            </el-input> -->
                                            <div class="input-flex input-slot flex-row flex-align-c flex-justify-s gc-append-box">
                                                 <el-input-number
style="width:80px;"
:controls="false"
size="small"
:min="0"
                                                   @input.native="clearNativeReg(item.second_money,'member_money',-1,-1,0.01)"
                                                    v-model.number="item.second_money.member_money">
                                                 </el-input-number>
                                                 <div class="gc-appendt group__append">元</div>
                                             </div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="普通用户三级佣金" v-if="commission_level==3">
                                <template slot-scope="scope">
                                    <div class="flex-col" v-if="scope.row.sku">
                                        <div class="leave-item" v-for="(item) in formFormatData.formData.spec_type==10?[scope.row.sku[0]]:scope.row.sku" :key="item.sku_leave_id">
                                            <!-- <el-input type="number"
                                             @blur="notZero(item.third_money,'scale')" @input.native="clearNativeReg(item.third_money,'scale',-1,100,0.01)"
                                              v-if="formFormatData.formData.dealer_money_type==10" v-model.number="item.third_money.scale" style="width:120px;margin-right:6px;">
                                                <template slot="append">%</template>
                                            </el-input>
                                            <el-input type="number" @blur="notZero(item.third_money,'money')"
                                            @input.native="clearNativeReg(item.third_money,'money',-1,-1,0.01)" v-if="formFormatData.formData.dealer_money_type==20"
                                            v-model.number="item.third_money.money" style="width:120px;margin-right:6px;">
                                                <template slot="append">元</template>
                                            </el-input> -->
                                            <div class="input-flex input-slot flex-row flex-align-c flex-justify-s gc-append-box" v-if="formFormatData.formData.dealer_money_type==10">
                                                <el-input-number
style="width:80px;"
:controls="false"
size="small"
:min="0"
                                                    @blur="notZero(item.third_money,'scale')"
@input.native="clearNativeReg(item.third_money,'scale',-1,100,0.01)"
                                               v-if="formFormatData.formData.dealer_money_type==10"
v-model="item.third_money.scale">
                                                </el-input-number>
                                                    <div class="gc-appendt group__append">%</div>
                                             </div>
                                            <div class="input-flex input-slot flex-row flex-align-c flex-justify-s gc-append-box" v-if="formFormatData.formData.dealer_money_type==20">
                                                <el-input-number
style="width:80px;"
:controls="false"
size="small"
:min="0"
                                                  @blur="notZero(item.third_money,'money')"
                                                   @input.native="clearNativeReg(item.third_money,'money',-1,-1,0.01)"
                                                    v-if="formFormatData.formData.dealer_money_type==20"
                                                     v-model="item.third_money.money">
                                                   </el-input-number>
                                                <div class="gc-appendt group__append">元</div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="会员用户三级佣金" v-if="formFormatData.formData.dealer_money_type==20&&formFormatData.formData.is_member_price==1&&commission_level==3">
                                <template slot-scope="scope">
                                    <div class="flex-col" v-if="scope.row.sku">
                                        <div class="leave-item" v-for="(item) in formFormatData.formData.spec_type==10?[scope.row.sku[0]]:scope.row.sku" :key="item.sku_leave_id">
                                            <!-- <el-input
                                            @input.native="clearNativeReg(item.third_money,'member_money',-1,-1,0.01)" v-model="item.third_money.member_money"
                                            style="width:120px;margin-right:6px;">
                                                <template slot="append">元</template>
                                            </el-input> -->
                                            <div class="input-flex input-slot flex-row flex-align-c flex-justify-s gc-append-box">
                                                 <el-input-number
style="width:80px;"
:controls="false"
size="small"
:min="0"
                                                   @input.native="clearNativeReg(item.third_money,'member_money',-1,-1,0.01)"
v-model="item.third_money.member_money">
                                                 </el-input-number>
                                                 <div class="gc-appendt group__append">元</div>
                                             </div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                        </section>
                    </el-table>

                    <el-table v-show="formFormatData.formData.is_ind_dealer==0&&levelData" :data="levelData" style="width: 100%">
                        <el-table-column label="分销商等级名称">
                            <template slot-scope="scope">
                                <span>{{scope.row.leave_title}}</span>
                                <el-tag style="margin-left:10px;" v-show="scope.$index==0">默认等级</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="一级佣金比例">
                            <template slot-scope="scope">
                                <span v-show="scope.row.leave!=0">{{scope.row.leave_commission_1}}%</span>
                                <span v-show="scope.row.leave==0&&scope.row.dealer_money_type==10">{{scope.row.leave_commission_1}}%</span>
                                <span v-show="scope.row.leave==0&&scope.row.dealer_money_type==20">￥{{scope.row.leave_commission_1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="二级佣金比例" v-if="commission_level==2||commission_level==3">
                            <template slot-scope="scope">
                                <span v-show="scope.row.leave!=0">{{scope.row.leave_commission_2}}%</span>
                                <span v-show="scope.row.leave==0&&scope.row.dealer_money_type==10">{{scope.row.leave_commission_2}}%</span>
                                <span v-show="scope.row.leave==0&&scope.row.dealer_money_type==20">￥{{scope.row.leave_commission_2}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="三级佣金比例" v-if="commission_level==3">
                            <template slot-scope="scope">
                                <span v-show="scope.row.leave!=0">{{scope.row.leave_commission_3}}%</span>
                                <span v-show="scope.row.leave==0&&scope.row.dealer_money_type==10">{{scope.row.leave_commission_3}}%</span>
                                <span v-show="scope.row.leave==0&&scope.row.dealer_money_type==20">￥{{scope.row.leave_commission_3}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="wlm-form">
        <div class="wlm-form-header">一键发圈内容</div>
        <div class="wlm-form-content">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="140px" class="retail-form" label-position="right">
                <el-form-item label="发圈文案">
                    <el-input placeholder="请输入一键发圈文案" v-model="formFormatData.formData.extension_text">
                    </el-input>
                    <p class="form-help">一键发圈文案为空则默认使用商品名称作为发圈文案</p>
                </el-form-item>
                <el-form-item label="发圈图片">
                    <choose-files ref="chooseFiles" :config="chooseLogoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    <p class="form-help">图片数量建议8张、尺寸：400*400px,拖拽图片可以调整图片位置，发圈图片为空则</p>
                    <div class="flex-row">
                        <p class="form-help" style="margin-right:8px;">默认使用商品图片</p>
                        <el-button @click="loadImg" type="text">导入商品图</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="saveBase" type="primary">保存</el-button>
        <router-link tag="span" to="/distribution/distributorMerchandise">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
</div>
</template>

<script>
import {
  getDistributorCommissionInfo,
  singleCommissionSetting,
  LeaveList
} from '@/api/distribution'
import mixins from '@/mixins/mixins'
import ChooseFiles from '@/components/ChooseFiles/index'
export default {
  mixins: [mixins.getters('Form')],
  name: 'DistributorMerchandiseSetting',
  components: {
    ChooseFiles
  },
  directives: {

  },
  created() {
    LeaveList({ reckon: false }).then((response) => {
      const {
        data: {
          data: msgData = []
        }
      } = response
      if (msgData.is_dealer_leave === '0') {
        this.levelData.push(msgData.default_leave)
      } else {
        this.levelData = msgData.data
        this.levelData.unshift(msgData.default_leave)
      }
      this.commission_level = msgData.commission_level
      console.log(this.levelData)
    })
  },
  data() {
    return {
    //   thtype: '',
      levelData: [],
      commission_level: '',
      levelDefaultData: [],
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 8,
          isMore: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'extension_img',
          model: 'img',
          validateField: 'merchantlog'
        }
      },
      formFormatData: {
        key: 'userForm',
        api: {
          editForm: {
            api: getDistributorCommissionInfo,
            params: {
              goods_id: ''

            },
            filters: {
              img: {
                bindInit: ['chooseLogoConfig']
              }
            },
            redirect: 'goods_id'
          },
          submitForm: singleCommissionSetting
        },
        formData: {
          ids: [],
          extension_text: '',
          extension_img: [],
          is_distribution: 1,
          is_member_price: '',
          is_ind_dealer: 1,
          dealer_money_type: 10,
          //   sku: [],
          spec_type: '',
          leave_sku: []
        },
        rules: {
        }
      }
    }
  },
  methods: {
    saveBase() {
      const Base64 = require('js-base64').Base64
      const infodata = JSON.stringify(this.formFormatData.formData)
      const disMerSetting = Base64.encode(infodata)

      singleCommissionSetting({ data: disMerSetting }).then((response) => {
        const { data: { code } } = response
        if (code === 1) {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.$router.push({ path: '/distribution/distributorMerchandise' })
        }
      })
      //   this.formFormatSubmit({ router: { type: 'replace', path: '/distribution/distributorMerchandise', code: 1 }})
    },
    batchEdit(scopeRow, name) {
      if (this.formFormatData.formData.dealer_money_type === 10) {
        scopeRow.map(item => {
          console.log(item[`${name}`]['scale'])
          item[`${name}`]['scale'] = scopeRow[0][`${name}`]['scale']
        })
      } else {
        scopeRow.map(item => {
          console.log(item[`${name}`]['money'])
          item[`${name}`]['money'] = scopeRow[0][`${name}`]['money']
        })
      }
    },
    // formFormatCallBack(data, type, response) {
    //   console.log(type, 'type')
    //   this.thtype = type
    //   if (type === 'editForm') {
    //     console.log('buxifjadlfj')
    //     this.$nextTick(() => {
    //       this.$forceUpdate()
    //     })
    //   }
    // },
    loadImg() {
      const imgObj = JSON.parse(this.$route.query.img)
      this.chooseLogoConfig.initList = imgObj
      this.formFormatData.formData.extension_img = imgObj
      console.log('imgObj+++++++++++++++++', imgObj)

      //   var hasIndex = this.formFormatData.formData.extension_img.findIndex(tableitem => { return tableitem.file_id === imgObj.file_id })
      //   if (hasIndex === -1) {
      //     this.formFormatData.formData.extension_img.push(imgObj)
      //   }

      console.log(imgObj)
    }
  }
}
</script>

<style lang="scss" scoped>
.distributor-merchandise-setting {
    .mar-b-10 {
        margin-bottom: 10px;
    }

    .leave-item {
        min-height: 36px;
    }

    .gc-appendt{
    background-color: #F5F7FA;
    color: #909399;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    padding: 0 10px;
    width: 1px;
    white-space: nowrap;
    }
    .input-flex{
        /deep/.el-input__inner{
        width: 114px;
    }
    }
    .group__append{
    text-align: center;
    height: 32px;
    line-height: 32px;
    width: auto;
    }
}

</style>
